<template>
    <!-- 介绍页 -->
    <div class="introduce-page">
        <div class="p-single"><p>成为筑功者 成为推广大使</p></div>
        <div class="p-item item-1">
            <h2>1、恭喜您成为推广大使</h2>
            <p>没错，您已经是筑功者的推广大使啦。推广大使肩负“成就自我，帮助他人”的美好使命。我们时刻以您为荣哦!</p>
        </div>
        <div class="p-item item-2">
            <h2>2. 怎么使用您的专属推广大使二维码呢？</h2>
            <p>1）长按图片即可保存您的二维码图片至手机相册，您可以使用自己的头像或您喜欢
                的图片来制作个性二维码哦，或者使用系统推荐的二维码图片，通过微信或者QQ将
                您的二维码图片发送给好友；</p>
            <p>（2）好友长按识别二维码后，可以选择立即加入筑功者会员或免费体验。如选择立即
            加入筑功者会员，填写信息后即可以原价的 9.5 折成为筑功者会员，开始享受正式
            会员权益；如选择免费体验，填写信息后则成为普通用户。</p>
        </div>
        <div class="p-item item-3">
            <h2>3. 成为推广大使的好处是？</h2>
            <p>1）每有一位朋友扫描您的二维码成功加入筑功者会员后，您将获得相应的奖励哦（
                具体奖励规则，您可以查看筑功者会员权益详细了解。）</p>
            <p>2）分享美好的事物本身就是一种快乐：将您在筑功者的成长和收获分享到您的社交
            圈，帮助身边的人提升和成长，为建筑行业的发展贡献一份自己的力量。</p>
        </div>
        <div class="button-group">
             <button class="button-group-top" @click="HandleShare" >
                <span>立即分享</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-share"></use>
                </svg>   
            </button>
            <button class="button-group-bottom">
                 <span>立即分享</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_share"></use>
                </svg>   
            </button>

        </div>
         <!-- 弹出分享弹框 -->
        <mt-popup  v-model="popupShare" class="share-layer" @click.native="HandleShare" ></mt-popup>
    </div>
</template>

<script>
import { Popup } from "mint-ui";
import {_wxConfig} from '@/api/wxshare';
export default {
    data(){
        return{
            popupShare: false, //分享弹框
        }
    },
  created(){},
    methods:{
     
    },
    methods:{
        //分享项目
    HandleShare() {
      this.popupShare = !this.popupShare;
      this.$store.state.fixflag=!this.$store.state.fixflag;
    //   this.$emit('fix',this.popupShare);
    },
    },
   mounted() {
       var userinfo=this.$store.state.userinfo;
      //console.log(userinfo.name);
     _wxConfig("/user/invite/invite", "邀请函",`${userinfo.name}邀请你加入筑功者`,userinfo.headportrait); //页面加载之后 执行获取微信jsconfig
  }
 
}
</script>

<style lang="scss" scoped>
.introduce-page{
    width: 100%;
    height: 966px;
    background: url('~@/assets/introduce.jpg') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    background-clip: content-box;
    .p-single{
        width: 100%;
        position: absolute;
        top: 86px;
        p{
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
    }
    .p-item{
       position: absolute;
       padding: 0 20px;
       
        h2{
            font-size: 16px;
            color:#fff;
             text-align: center;
             margin-bottom: 23px;
        }
        p{
            font-size: 14px;
            color: #fff;
            line-height: 1.6;
            
        }
    }
    .item-1{
        top:306px;
    }
    .item-2{
        top:424px;
    }
     .item-3{
        top:670px;
    }
    .button-group{
        height: 44.3px;
        width: 333px;
        left: 50%;
        margin-left: -167px;
        top: 880px;
        position: absolute;
         button{
        position: absolute;
        width: 333px;
        height: 40px;
        border-radius: 20px;
        position: absolute;
        color:#7f5101;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            margin-right: 5px;
        }
        }
        &-top{
            top: 0;
            left: 0;
            z-index: 999;
            background: linear-gradient(to bottom, #fed261, #daa039);
        }
        &-bottom{
            bottom: 0;
            left: 0;
            background: #d58d01;
            z-index: 998;
        }

    }
    .share-layer{
    width: 100%;
    height: 100%;
    background: url('~@/assets/share-tips.png') 100% 0 no-repeat;
}
   
}

</style>
